<template>
  <Result status="success" title="更改密码成功" :sub-title="getSubTitle">
    <template #extra>
      <a-button key="console" type="primary" @click="finish"> 返回登录 </a-button>
    </template>
  </Result>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, onMounted, watchEffect, watch } from 'vue'
  import { Form, Input, Button, Result } from 'ant-design-vue'
  import { useI18n } from '/@/hooks/web/useI18n'
  import { useLoginState } from '../login/useLogin'
  import { useCountdown } from '/@/components/CountDown/src/useCountdown'
  import { propTypes } from '/@/utils/propTypes'

  export default defineComponent({
    name: 'Step3',
    components: {
      Button,
      Form,
      FormItem: Form.Item,
      Input,
      Result,
    },
    props: {
      accountInfo: {
        type: Object,
        default: () => ({}),
      },
      count: propTypes.number.def(5),
    },
    emits: ['finish'],
    setup(props, { emit }) {
      const { t } = useI18n()
      const { accountInfo } = props
      const { handleBackLogin } = useLoginState()

      const { currentCount, start } = useCountdown(props.count)
      const getSubTitle = computed(() => {
        return t('sys.login.subTitleText', [unref(currentCount)])
      })
      /**
       * 倒计时
       */
      watchEffect(() => {
        if (unref(currentCount) === 1) {
          setTimeout(() => {
            finish()
          }, 500)
        }
      })

      /**
       * 结束回调
       */
      function finish() {
        handleBackLogin()
        emit('finish')
      }

      onMounted(() => {
        start()
      })

      return {
        getSubTitle,
        finish,
      }
    },
  })
</script>
